<template>
  <div :class="className" ref="countup">
      
  </div>
</template>

<script>
import {CountUp} from 'countup.js'
import { nextTick, onMounted,reactive,ref, watchEffect } from 'vue';
export default {
    name: 'CountUp',

    props:{
        number: {
            type: Number,
            require: true
        },
        start: {
            type: Number,
            default: 0
        },
        duration:{
            type: Number,
            default: 2
        },
        useGrouping:{
            type: Boolean,
            default: true
        },
        prefix:{
            type: String,
            default: ''
        },
        className:{
            type: String
        },
        autoUp:{
            type: Boolean,
            default: true
        }

    },

    setup(props){
        const countup = ref(null)
        
        const opition = reactive({
            startVal: props.start,
            duration: props.duration,
            useGrouping: props.useGrouping,
            prefix: props.prefix
        })

        let countUp;
        onMounted(()=>{
            init()
            props.autoUp ? startNum() : ''
        })

        watchEffect(()=>{
            opition.number = props.number
            opition.startVal = props.start
            opition.duration = props.duration
            opition.useGrouping = props.useGrouping
            opition.prefix = props.prefix
        })

        const init = ()=>{
            countUp = new CountUp(countup.value,props.number,opition)
        }

        const startNum = ()=>{
            init()
            countUp.start()
        }

        const pauseResume = ()=>{
            countUp.pauseResume()
        }

        const resetNum = ()=>{
             init()
            countUp.reset()
        }

        const update = (val)=>{
            countUp.update(val)
        }

        return {countup,startNum,pauseResume,resetNum,update,opition}
    }
}
</script>

<style>

</style>